<template>
  <div id="mycontent">
    <img src="./img/aaaa.png" alt="" class="aaaa" />

    <div v-for="item of reying" class="box" :key="item.id">
      <router-link :to="'/item/'+ item.id">
        <img :src="item.img" alt="" />
        <div class="content">
          <h3>{{ item.nm }}</h3>
          <p v-if="item.globalReleased == true">
            观众评：<strong>{{ item.mk }}</strong>
          </p>
          <p v-if="item.globalReleased == false">
            <strong>{{ item.wish }}</strong
            >人想看
          </p>
          <p>{{ item.desc }}</p>
          <span>{{ item.showInfo }}</span>
        </div>

        <button :style="{ background: item.showStateButton.color }">
          {{ item.showStateButton.content }}
        </button>
      </router-link>
    </div>

    <div class="kong"></div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "reying",
  data() {
    return {
      reying: [],
    };
  },
 created() {
    axios
      .get(
        "/api/mmdb/movie/v3/list/hot.json?ct=%E9%95%BF%E6%B2%99&ci=70&channelId=4"
      )
      .then((res) => {
        console.log(res.data.data.hot);

        res.data.data.hot.forEach((item) => {
          item.img = item.img.replace("w.h", "128.180");
        });
        this.reying = res.data.data.hot;
      });
  },
  mounted(){
    console.log(this.reying)
  }
  
};
</script>

<style>
#mycontent .box a{
  width: 100%;
  height: 3.466667rem;
  border-bottom: rgb(194, 191, 191) solid 0.026667rem;
  display: flex;
  align-items: center;
  justify-items: center;
  text-decoration: none;
  color: #333;
}

#mycontent .box a .content {
  margin-left: 0.266667rem;
  margin-bottom: 2.053333rem;
  width: 5.04rem;
  height: 1.786667rem;
}
#mycontent .box a .content h3 {
  font-size: 0.453333rem;
}

#mycontent .box a img {
  margin-left: 0.213333rem;
  width: 2.186667rem;
}

#mycontent .box a button {
  height: 0.8rem;
  width: 1.52rem;
  border-style: none;
  background-color: red;
  color: white;
  border-radius: 0.4rem;
  line-height: 0.533333rem;
  text-align: center;
  margin-left: 0.533333rem;
}

.box h3,
.box p,
.box span {
  margin-top: 0.533333rem;
}
.box p,
.box span {
  font-size: 0.4rem;
  color: #666;
}
.box p {
  margin-top: 0.266667rem;
  display: inline-block;
  width: 5.333333rem;
}
.box strong {
  color: rgb(255, 208, 0);
}
.kong {
  height: 1.493333rem;
}
.aaaa {
  width: 100%;
  margin-top: 4rem;
}
</style>